import * as echarts from 'echarts';
// ECharts Option
const setChartOption = (chartData) => {
  const name = [], num = [];
  for (let i = 0; i < chartData.length; i++) {
    name.push(chartData[i].name);
    num.push(chartData[i].num);
  }
  const chartOption = {
    color: ["#3398DB"],
    toolbox: {
      show: false,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "0%",
      right: "8%",
      bottom: "5%",
      top: "7%",
      height: "85%",
      containLabel: true,
      z: 22,
    },
    xAxis: [
      {
        type: "value",
        gridIndex: 0,
        axisTick: {
          alignWithLabel: true,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        gridIndex: 0,
        splitNumber: 12,
        data: name?.reverse(),
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          color: '#eee',
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        barWidth: "30%",
        xAxisIndex: 0,
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            // barBorderRadius: 30,
            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              {
                offset: 0,
                color: "#67ace5",
              },
              {
                offset: 0.5,
                color: "#4c9fd1",
              },
              {
                offset: 1,
                color: "#284d58",
              },
            ]),
          },
        },
        label: {
          show: true,
          position: 'right',
          formatter: (params) => params.value + '个'
        },
        data: num?.reverse(),
        zlevel: 11,
      },
    ],
  };
  return chartOption;
}

export default setChartOption;
